<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="stylesheet" href="./css/bootstrap.min.css" />
  <style>
    .form-select {
      width: 103px;
      display: inline-block;
    }

    .col-form-label {
      text-align: right;
    }

    .figure-img {
      width: 100px;
      height: 100px;
    }

    #upload {
      display: none;
    }

    .figure-caption {
      cursor: pointer;
    }
  </style>
</head>

<body>
  <div class="container">
    <h1 class="p-5">个人设置</h1>
    <form class="col-6">
      <div class="row mb-3">
        <label class="col-form-label col-3">用户名：</label>
        <div class="col-7">
          <input id="username" disabled class="form-control col-9" type="text" />
        </div>
      </div>
      <div class="row mb-3">
        <label class="col-form-label col-3">籍贯：</label>
        <div class="col-9">
          <select class="form-select col-4" name="province">
            <option value="">--省--</option>
          </select>
          <select class="form-select col-4" name="city">
            <option value="">--市--</option>
          </select>
          <select class="form-select col-4" name="county">
            <option value="">--县--</option>
          </select>
        </div>
      </div>
      <div class="row mb-3">
        <label class="col-form-label col-3">头像：</label>
        <div class="col-9">
          <figure class="figure">
            <input type="file" id="upload" />
            <img src="./imgs/default.jpg" class="figure-img img-fluid rounded" alt="..." />
            <figcaption class="figure-caption">修改头像</figcaption>
          </figure>
        </div>
      </div>
      <div class="row mb-3">
        <label class="col-3"></label>
        <div class="col-9">
          <button class="btn btn-primary">保存</button>
        </div>
      </div>
    </form>
  </div>

  <script src="./lib/bootstrap.min.js"></script>
  <script src="./lib/axios.js"></script>
  <script src="./lib/form-value.js"></script>
  <script src="./lib/request.js"></script>

  <script>
    // 发送请求，获取用户信息（获取用户的用户名、头像、省市县数据）
    // axios({
    //   method: 'GET',
    //   url: '/user/info'
    // }).then(({ data: res }) => {
    //   console.log(res);
    // })
    // ----------------------- 到达首页，立即获取用户信息 ----------------------------
    ; (async function () {
      const { data: res } = await axios.get('/user/info')
      // console.log(res.data.username)
      document.querySelector('#username').value = res.data.username
      // console.log(res)
      // 判断用户是否有头像
      if (res.data.avatar) {
        document.querySelector('img').src = res.data.avatar
      }

      // 判断用户是否设置过省市县
      if (res.data.province && res.data.city && res.data.county) {
        // 获取全部的省（页面刷新已经获取过了）
        // 获取市、获取县
        let p1 = axios.get('/api/city', { params: { pname: res.data.province } })
        let p2 = axios.get('/api/county', { params: { pname: res.data.province, cname: res.data.city } })

        const [{ data: res1 }, { data: res2 }] = await Promise.all([p1, p2])
        // console.log(result) // [{data: 市}, {data: 县}]
        // result[0].data    result[1].data
        // console.log(res1)
        // console.log(res2)
        let arr1 = [`<option value="">--市--</option>`]
        let arr2 = [`<option value="">--县--</option>`]
        res1.forEach(item => arr1.push(`<option value="${item}">${item}</option>`))
        res2.forEach(item => arr2.push(`<option value="${item}">${item}</option>`))
        city.innerHTML = arr1.join('')
        county.innerHTML = arr2.join('')
        // 让省市县，选中
        province.value = res.data.province
        city.value = res.data.city
        county.value = res.data.county
      }

    })()


    // ---------------------- 找到页面的一些元素，备用 ------------------------------
    let province = document.querySelector('[name=province]') // 省那个下拉框
    let city = document.querySelector('[name=city]') // 市那个下拉框
    let county = document.querySelector('[name=county]') // 县那个下拉框

      // --------------------- 获取省 ---------------------------------------------
      ; (async function () {
        // axios发送请求，获取全部的省
        const { data: res } = await axios.get('/api/province')
        // console.log(res)
        let arr = [`<option value="">--省--</option>`]
        res.forEach(item => arr.push(`<option value="${item}">${item}</option>`))
        province.innerHTML = arr.join('')
      })()

    // --------------------- 省change的时候，获取对应的市 -------------------------
    province.addEventListener('change', async function () {
      // console.log(this.value) // 获取select下拉框的值，得到的是option的value值
      county.innerHTML = `<option value="">--县--</option>`
      if (this.value === '') {
        // 说明选择了空的省，重置市
        city.innerHTML = `<option value="">--市--</option>`
        return
      }
      // 发送请求，获取对应的市
      const { data: res } = await axios.get('/api/city', { params: { pname: this.value } })
      // console.log(res)
      // 把所有的市，放到第2个下拉框中
      let arr = [`<option value="">--市--</option>`]
      res.forEach(item => arr.push(`<option value="${item}">${item}</option>`))
      city.innerHTML = arr.join('')
    })

    // --------------------- 市change的时候，获取对应的县 -------------------------
    city.addEventListener('change', async function () {
      // console.log(this.value) // 获取select下拉框的值，得到的是option的value值
      if (this.value === '') {
        // 说明选择了空的省，重置市
        county.innerHTML = `<option value="">--县--</option>`
        return
      }
      // 发送请求，获取对应的县
      const { data: res } = await axios.get('/api/county', {
        params: {
          pname: province.value,
          cname: city.value
        }
      })
      // console.log(res)
      // 把所有的县，放到第3个下拉框中
      let arr = [`<option value="">--县--</option>`]
      res.forEach(item => arr.push(`<option value="${item}">${item}</option>`))
      county.innerHTML = arr.join('')
    })

    // 点击保存，获取用户选择的省市县，然后提交给接口，从而完成更新
    document.querySelector('button').addEventListener('click', async function (e) {
      e.preventDefault()
      // 使用 val 插件，获取下拉框的值
      // let data = val(表单)
      let data = val(document.querySelector('form'))
      // console.log(data)
      // Ajax提交
      const { data: res } = await axios.post('/user/info', data)
      // console.log(res);
      if (res.status === 0) {
        alert(res.message)
      }
    })

    // ---------------------------- 头像上传 ------------------------------------------
    // 点击 figcaption 标签，触发文件域的单击事件，保证可以选择图片
    document.querySelector('figcaption').addEventListener('click', function () {
      document.querySelector('#upload').click()
    })

    // 当文件域的内容 改变的时候，完成上传
    document.querySelector('#upload').addEventListener('change', async function () {
      // console.dir(this)
      if (this.files.length > 0) {
        let fileObj = this.files[0]
        let fd = new FormData()
        fd.append('avatar', fileObj)
        const { data: res } = await axios.post('/user/avatar', fd)
        // console.log(res)
        if (res.status === 0) {
          document.querySelector('img').src = res.data
          alert(res.message)
        }
      }
    })
  </script>
</body>

</html>